<template>
  <div class="carousel7">
    <div class="container">
      <div v-fade-in class="carousel-title">合作伙伴</div>
      <M-button v-slide-up @click="handleDetail" />
      <div class="honeycomb-container">
        <div
          v-for="(item, index) in honeycombData"
          :key="index"
          class="honeycomb-item"
          :class="{ 'has-data': item.hasData }"
          :style="getHoneycombStyle(item)"
          @mouseenter="handleMouseEnter(index)"
          @mouseleave="handleMouseLeave(index)"
        >
          <div v-slide-plus class="honeycomb-content">
            <img v-if="item.image" :src="publicSrc(item.image)" :alt="item.introduce" />
            <span v-else-if="item.introduce">{{ item.introduce }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
const router = useRouter();
import { publicSrc } from "@/utils/common";

const props = defineProps({
  data: {
    type: Array as PropType<any[]>,
    default: () => [],
  },
});

// 创建响应式的悬浮状态数组
const hoverStates = ref<boolean[]>([]);

const honeycombData = computed(() => {
  const data = generateHoneycombData(props.data || []);
  // 确保悬浮状态数组长度与数据长度一致
  if (hoverStates.value.length !== data.length) {
    hoverStates.value = new Array(data.length).fill(false);
  }
  // 将悬浮状态合并到数据中
  return data.map((item, index) => ({
    ...item,
    isHovered: hoverStates.value[index] || false
  }));
});

// 生成蜂窝状错峰排列数据 - 从中心向外螺旋填充
const generateHoneycombData = (data: any[]) => {
  const rows = 6;
  const cols = 16;
  const totalSlots = rows * cols;

  // 初始化空位
  const result: any[] = Array.from({ length: totalSlots }, (_, i) => {
    const row = Math.floor(i / cols);
    const col = i % cols;
    return {
      introduce: "",
      image: "",
      row,
      col,
      isHovered: false,
      hasData: false,
    };
  });

  // 计算中心点（与视觉居中一致）
  const centerRow = Math.floor(rows / 2); // 3
  const centerCol = Math.floor(cols / 2); // 8

  // even-r 偏移坐标系的六邻域
  const getNeighbors = (r: number, c: number) => {
    const evenRow = r % 2 === 0;
    const neighbors = evenRow
      ? [
          [0, -1],
          [0, 1],
          [-1, 0],
          [-1, 1],
          [1, 0],
          [1, 1],
        ]
      : [
          [0, -1],
          [0, 1],
          [-1, -1],
          [-1, 0],
          [1, -1],
          [1, 0],
        ];
    return neighbors
      .map(([dr, dc]) => [r + dr, c + dc])
      .filter(([nr, nc]) => nr >= 0 && nr < rows && nc >= 0 && nc < cols);
  };

  // 从中心点开始 BFS，得到从内到外的“螺旋”顺序
  const visited = Array.from({ length: rows }, () => Array(cols).fill(false));
  const queue: Array<[number, number]> = [];
  const order: Array<[number, number]> = [];

  queue.push([centerRow, centerCol]);
  visited[centerRow][centerCol] = true;

  while (queue.length > 0) {
    const [r, c] = queue.shift() as [number, number];
    order.push([r, c]);
    // 控制邻居遍历顺序，形成顺时针扩散的感觉
    const neighbors = getNeighbors(r, c);
    for (const [nr, nc] of neighbors) {
      if (!visited[nr][nc]) {
        visited[nr][nc] = true;
        queue.push([nr, nc]);
      }
    }
  }

  // 将数据按 order 写入
  let dataIndex = 0;
  for (let i = 0; i < order.length && dataIndex < data.length; i++) {
    const [r, c] = order[i];
    const idx = r * cols + c;
    result[idx] = {
      ...data[dataIndex],
      row: r,
      col: c,
      isHovered: false,
      hasData: true,
    };
    dataIndex++;
  }

  return result;
};

// 获取蜂窝样式 - 错峰排列
const getHoneycombStyle = (item: any) => {
  const hexWidth = 78; // 六边形宽度
  const hexHeight = 84; // 六边形高度
  const gap = 10; // 间距

  // 计算位置 - 错峰排列
  const x = item.col * (hexWidth + gap);
  const y = item.row * (hexHeight * 0.75 + gap);

  // 偶数行向右偏移半个六边形的宽度
  const offsetX = item.row % 2 === 0 ? (hexWidth + gap) / 2 : 0;

  const scale = item.isHovered ? 1.6 : 1;

  return {
    transform: `translate(${x + offsetX}px, ${y}px) scale(${scale})`,
    zIndex: item.isHovered ? 10 : item.row,
  };
};

// 鼠标悬浮事件
const handleMouseEnter = (index: number) => {
  if (hoverStates.value[index] !== undefined) {
    hoverStates.value[index] = true;
  }
};

const handleMouseLeave = (index: number) => {
  if (hoverStates.value[index] !== undefined) {
    hoverStates.value[index] = false;
  }
};

// 查看关于我们
const handleDetail = () => {
  router.push("/pc/about");
};
</script>

<style lang="scss" scoped>
.carousel7 {
  width: 100%;
  height: 100vh;
  background: url("@/assets/home/carousel7.png") no-repeat;
  background-size: 100% 100%;
  position: relative;

  .container {
    position: relative;
    height: 100%;

    .carousel-title {
      position: absolute;
      left: 0;
      top: 15vh;
      font-size: 36px;
      width: 65%;
      font-weight: 700;
      letter-spacing: 0px;
      line-height: 96px;
      color: #fff;
      z-index: 4;
    }

    .more-btn {
      position: absolute;
      left: 1px;
      top: 25vh;
    }

    .honeycomb-container {
      position: absolute;
      left: 35%;
      top: 450px;
      transform: translateX(-50%);
      width: 1200px;
      height: auto;
      .honeycomb-item {
        position: absolute;
        width: 78px;
        height: 84px;
        transition: all 0.3s ease;
        cursor: pointer;

        .honeycomb-content {
          width: 100%;
          height: 100%;
          background: rgba(255, 255, 255, 0.1);
          backdrop-filter: blur(10px);
          border: 1px solid rgba(255, 255, 255, 0.2);
          display: flex;
          align-items: center;
          justify-content: center;
          clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
          transition: all 0.3s ease;

          img {
            width: 50px;
            height: 50px;
            object-fit: contain;
          }

          span {
            font-size: 12px;
            color: #fff;
            font-weight: 500;
            text-align: center;
            line-height: 1.2;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
          }
        }

        &:hover {
          .honeycomb-content {
            background: rgba(255, 255, 255, 0.2);
            border-color: rgba(255, 255, 255, 0.5);
            box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
          }
        }
      }
    }
  }
}
</style>
